<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Springboot增删改查案例</title>

<!-- All Css files -->
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/css/bootstrap.min.css">
<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">

<!-- All Js Files -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/1.15.0/popper.min.js" type="module"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>

</head>
<body>
<div class="container-xl">
	<div class="table-responsive">
		<div class="table-wrapper">
			<div class="table-title">
				<div class="row">
					<div class="col-sm-6">
						<h2>用户管理模板</b></h2>
					</div>
					<div class="col-sm-6">
						<a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="fa fa-plus"></i> <span>新增</span></a>
						<a href="#" onclick="showDeleteBatchModel()" class="btn btn-danger" data-toggle="modal"><i class="fa fa-minus-circle"></i> <span>删除</span></a>
					</div>
				</div>
			</div>
			<table class="table table-striped table-hover">
				<thead>
					<tr>
						<th>
							<span class="custom-checkbox">
								<input type="checkbox" id="selectAll">
								<label for="selectAll"></label>
							</span>
						</th>
						<th>用户名</th>
						<th>性别</th>
						<th>出生日期</th>
						<th>住址</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="usersListBody">
					<!--以下用户列表循环开始-->

					<!--以下用户列表循环结束-->
				</tbody>
			</table>
			<div class="clearfix">
				<div class="hint-text">总记录：<b id="totalRecordNumber"></b>&nbsp;&nbsp; 每页: <b id="perPageNumber"></b> 条记录</div>
				<ul class="pagination" id="userPagination">
					<!--
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item active"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">4</a></li>
					<li class="page-item"><a href="#" class="page-link">5</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
					-->
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- 新增用户的模态窗口 -->
<div id="addEmployeeModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<form id="saveUserForm">
				<div class="modal-header">
					<h4 class="modal-title">新增用户</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>用户名</label>
						<input type="text" class="form-control" name="username" required>
					</div>
					<div class="form-group">
						<label>密码</label>
						<input type="password" class="form-control" name="password" required>
					</div>
					<div class="form-group">
						<label>性别</label>
						<div>
							<input type="radio" name="gender" value="男" checked/>男&nbsp;&nbsp;<input type="radio" name="gender" value="女"/>女
						</div>
					</div>
					<div class="form-group">
						<label>出生日期</label>
						<input type="date" class="form-control" name="birthday" required>
					</div>

					<div class="form-group">
						<label>住址</label>
						<input type="text" class="form-control" name="address" required>
					</div>

					<div class="form-group">
						<label>手机</label>
						<input type="text" class="form-control" name="mobile" required>
					</div>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
					<!--以后前端表单里面一律不允许使用submit按钮-->
					<input type="button" onclick="doSaveUser();" class="btn btn-success" value="新增">
				</div>
			</form>
		</div>
	</div>
</div>
<!-- 用户编辑的模态窗口 -->
<div id="editEmployeeModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<form id="updateUserForm">
				<div class="modal-header">
					<h4 class="modal-title">编辑用户</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>用户名</label>
						<input type="hidden" name="uid" value=""/>
						<input type="text" class="form-control" name="username" required>
					</div>
					<div class="form-group">
						<label>密码</label>
						<input type="password" class="form-control" name="password" required>
					</div>
					<div class="form-group">
						<label>性别</label>
						<div>
							<input type="radio" name="gender" value="男" checked/>男&nbsp;&nbsp;<input type="radio" name="gender" value="女"/>女
						</div>
					</div>
					<div class="form-group">
						<label>出生日期</label>
						<input type="date" name="birthday" class="form-control" required>
					</div>

					<div class="form-group">
						<label>住址</label>
						<input type="text" class="form-control" name="address" required>
					</div>

					<div class="form-group">
						<label>手机</label>
						<input type="hidden" name="version" value=""/>
						<input type="text" class="form-control" name="mobile" required>
					</div>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
					<input type="button" onclick="doUpdateUser();" class="btn btn-info" value="更新">
				</div>
			</form>
		</div>
	</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteEmployeeModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<form>
				<div class="modal-header">
					<h4 class="modal-title">删除用户</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<p>确定要删除该用户吗?</p>
					<p class="text-warning"><small>该操作不可回滚.</small></p>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
					<input type="button" onclick="doRemoveUser()" class="btn btn-danger" value="删除">
				</div>
			</form>
		</div>
	</div>
</div>


<!-- Delete Modal HTML -->
<div id="deleteBatchEmployeeModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<form>
				<div class="modal-header">
					<h4 class="modal-title">批量删除用户</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<p>确定要删除该用户吗?</p>
					<p class="text-warning"><small>该操作不可回滚.</small></p>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="取消">
					<input type="button" onclick="doRemoveBatchUser()" class="btn btn-danger" value="删除">
				</div>
			</form>
		</div>
	</div>
</div>

<!---项目要到的公共的信息提示模态窗口-->
<!-- Ccnfirm Modal HTML -->
<div id="confirmDialogModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<form>
				<div class="modal-header">
					<h4 class="modal-title">提示信息</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<!--
					<p>确定要删除该用户吗?</p>
					-->
					<p class="text-success" id="confirmMsg"></p>
				</div>
				<div class="modal-footer">
					<input type="button" data-dismiss="modal" class="btn btn-danger" value="确定">
				</div>
			</form>
		</div>
	</div>
</div>

<!--引入自定义的工具类-->
<script src="js/util/myutil.js"></script>
<!--注意：以下次序绝对不能颠倒。必须先引入baseUrl.js再引入users.js-->
<script src="js/api/baseUrl.js"></script>
<script src="js/api/users.js"></script>

<script>
	let usersList = []; //所有用户的集合
    //let currentPageNumber = 1; //默认肯定是从第一页开始。。。
    let pager = {};
    let currentDeleteUserUid = -1;
	$(function(){
		//页面元素加载完毕后，调用初始化所有用户资料的方法。
		initAllUserList(1);
	})


	//加载所有的用户资料
	function initAllUserList(currentPageNumber){

		//肯定是要发送一个ajax异步请求。
		/*
        queryAllUsers().then(resp=>{
			console.log(resp);
			usersList = resp.data;
			refreshUsersList(usersList);
		})*/
		queryUserPager(currentPageNumber).then(resp=>{

			console.log("-------当前页面的分页对象--------")
			console.log(resp.data);
			pager = resp.data;
			if(resp.code === 200){
			    usersList = resp.data.records;
				refreshUsersList(usersList);
			}
		})
	}

	//刷新用户列表
	function refreshUsersList(users){
        let  html = '';
		$("#usersListBody").empty(); //清空所有的用户列表集合
		for(let i=0;i<users.length;i++){
			//注意：我们使用了ES6的字符串拼接语法。
			html +=`<tr>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<span class="custom-checkbox">
\t\t\t\t\t\t\t\t<input type="checkbox" name="ids" value="${users[i].uid}">
\t\t\t\t\t\t\t\t<label for="checkbox1"></label>
\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>${users[i].username}</td>
\t\t\t\t\t\t<td>${users[i].gender}</td>
\t\t\t\t\t\t<td>${users[i].birthday}</td>
\t\t\t\t\t\t<td>${users[i].address}</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="#" class="edit" data-toggle="modal" onclick="javascript:showModifyModel(${users[i].uid});"><i class="fa fa-edit" data-toggle="tooltip" title="更新"></i></a>
\t\t\t\t\t\t\t<a href="#" onclick="javascript:showDeleteModel(${users[i].uid});" class="delete" data-toggle="modal"><i class="fa fa-trash" data-toggle="tooltip" title="删除"></i></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>`;
		}
		$("#usersListBody").append(html);
		//重新刷新分页组件
		refreshPager()
	}


    //刷新分页列表
    function refreshPager(){
		$("#totalRecordNumber").text(pager.total);
		$("#perPageNumber").text(pager.size);

		$("#userPagination").empty();

		let html = '';
		if(pager.current === 1){ //说明现在是第一页，上一页不能用，对吧。
			html +=`<li class="page-item"><a href="#" class="page-link">上一页</a></li>`;
		}else{
			html +=`<li class="page-item"><a href="javascript:initAllUserList(${pager.current-1})" class="page-link">上一页</a></li>`;
		}

		for(let i=0;i<pager.pages;i++){
			if( (i+1) === pager.current){
				html+= `<li class="page-item active"><a href="javascript:initAllUserList(${i+1})" class="page-link">${i+1}</a></li>`;
			}else{
				html+= `<li class="page-item"><a href="javascript:initAllUserList(${i+1})" class="page-link">${i+1}</a></li>`;
			}
		}
        if(pager.current === pager.pages){ //说明当前已经是最后一页了。
			html+= `<li class="page-item"><a href="#" class="page-link">下一页</a></li>`;
		}else{
			html+= `<li class="page-item"><a href="javascript:initAllUserList(${pager.current+1})" class="page-link">下一页</a></li>`;
		}
		$("#userPagination").append(html);
	}


	//执行新增用户的方法

	function doSaveUser(){
		let user=getFormData('saveUserForm'); //要新增的用户对象；json对象，对吧....

		//下来问题的焦点是啥呢？
		console.log('--------要新增的用户对象信息---------');
		console.log(user);

		saveUser(user).then(resp=>{
			//console.log(resp);
		    if(resp.code === 200){
				//表示新增用户成功；
				//弹窗一个提示信息信息窗口
				$('#confirmDialogModal #confirmMsg').text('新增用户资料成功！');
				$('#confirmDialogModal').modal('show'); //显示这个模态窗口

				//在把新增用户的表单的内容重置一下。对吧。
				//怎么重置呢？
				//必须把jQuery换成为Dom才能调用 reset就是重置。
				$("#saveUserForm").get(0).reset();

				//起一个定时器重新刷新用户列表界面
				window.setTimeout('initAllUserList(1)',1000);
			}
		})
	}

	function showModifyModel(uid){
		let modifyUser = {};
		console.log('要编辑的用户编号是：'+uid);
		$("#editEmployeeModal").modal('show'); //显示编辑用户的模态窗口；
		//发送异步请求获取要编辑的用户资料；
		//暂时先不写。

		queryUserInfoByUid(uid).then(resp=>{
			//console.log(resp.data);
			modifyUser = resp.data;
			console.log('--------要编辑的用户对象信息是--------');
			console.log(modifyUser);
			$("#updateUserForm input[name='uid']").val(modifyUser.uid);
			$("#updateUserForm input[name='username']").val(modifyUser.username);
			$("#updateUserForm input[name='password']").val(modifyUser.password);
			$("#updateUserForm input[name='birthday']").val(modifyUser.birthday);
			$("#updateUserForm input[name='address']").val(modifyUser.address);
			$("#updateUserForm input[name='mobile']").val(modifyUser.mobile);
            $("#updateUserForm input[name='gender']").each((i,e)=>{
				//console.log(e);
			    if($(e).val() === modifyUser.gender){
					$(e).prop("checked",true); //选中
				}
			})
		})
	}

	function doUpdateUser(){

		//把表单自动封装为一个json对象
		let updateUser = getFormData("updateUserForm");

		modifyUser(updateUser).then(resp=>{
			console.log(resp);
			if(resp.code === 200){
				$('#confirmDialogModal #confirmMsg').text('编辑用户资料成功！');
				$('#confirmDialogModal').modal('show'); //显示这个模态窗口
                //起一个定时器重新刷新用户列表界面
				window.setTimeout('initAllUserList(1)',1000);
			}
		})
	}

	function showDeleteModel(uid){
		console.log("--------要删除的用户编号是-------");
		console.log(uid);
		currentDeleteUserUid = uid;
		$("#deleteEmployeeModal").modal('show'); //显示编辑用户的模态窗口；
	}

	function doRemoveUser(){
		deleteUser(currentDeleteUserUid).then(resp=>{
			if(resp.code === 200){
				//说明删除成功了。
				//把模态窗口关闭即可!
				$("#deleteEmployeeModal").modal('hide');
				//起一个定时器重新刷新用户列表界面
				window.setTimeout('initAllUserList(1)',1000);
			}
		})
	}

	function showDeleteBatchModel(){
		$("#deleteBatchEmployeeModal").modal('show'); //显示编辑用户的模态窗口；
	}

	function doRemoveBatchUser(){
		let idsList = [];
		//获得用户选中的checkbox的uid的集合。
		console.log('-------要遍历的页面上的checkbox集合--------')
        $("#usersListBody :checkbox[name='ids']").each((i,e)=>{
			console.log(e);
            if($(e).prop("checked")){
				idsList.push($(e).val())
			}
		})

		console.log("您要批量删除的ids列表是");
		console.log(idsList);

		deleteUsersList(idsList).then(resp=>{
			console.log(resp);
			if(resp.code === 200){
				/*
				$('#confirmDialogModal #confirmMsg').text('批量删除用户资料成功！');
				$('#confirmDialogModal').modal('show'); //显示这个模态窗口
                */
				$("#deleteBatchEmployeeModal").modal('hide');

				//起一个定时器重新刷新用户列表界面
				window.setTimeout('initAllUserList(1)',1000);
			}
		})
	}



</script>
</body>
</html>
